<template>
  <div style="width: 100%;padding: 10px">
    <el-card class="box-card">
      <div>
        <div style="display: flex;align-items: center;justify-content: space-between">
          <div class="details_Header">
            <div class="deleted_Line" />
            <span class="details_HeaderTitle">订单信息</span>
          </div>
          <div style="display: flex">
            <el-button  type="primary" style="margin-left: 10px" v-if="form.status==5" @click="completeclick"> 执行</el-button>
            <el-button  type="primary" style="margin-left: 10px" v-if="form.status==5" @click="cancelclick">驳回 </el-button>
          </div>
        </div>
        <div class="deleted_OrderHeader" style="border-left: none;">
          <el-row :gutter="24">
             <!-- <el-col :span="6">
                 <div style="display: flex;">
                    <span class="deleted_Row_Headings">商品缩略图:</span>
                    <img style="width:50px;height:50px;margin-left:20px" :src="form.thumbnail" alt="">
                 </div>
            </el-col> -->
            <el-col :span="24">
              <span class="deleted_Row_Headings">商品名称:</span>
              <span class="deleted_OrderTitle">{{ form.name }}</span>
            </el-col>
            <!-- <el-col :span="6">
              <span class="deleted_Row_Headings">单位:</span>
              <span class="deleted_OrderTitle">{{ form.unit }}</span>
            </el-col>
            <el-col :span="6">
              <span class="deleted_Row_Headings">商品规格：</span>
              <span class="deleted_OrderTitle" >{{ form.spec }}</span>
            </el-col> -->
          </el-row>
        </div>
        <div>
          <el-row :gutter="24" class="deleted_OrderContent">
            <el-col :span="6">
              <span class="deleted_Row_Headings">数量</span>
              <span class="deleted_OrderTitle">{{ form.quantity }}</span>
            </el-col>
            <el-col :span="6">
              <span class="deleted_Row_Headings">价格:</span>
              <span class="deleted_OrderTitle">{{ form.price }}</span>
            </el-col>
            <el-col :span="6">
              <span class="deleted_Row_Headings">商品规格：</span>
              <span class="deleted_OrderTitle" >{{ form.spec }}</span>
            </el-col>
          </el-row>
          <el-row :gutter="24" class="deleted_OrderContent">
            <el-col :span="6">
              <span class="deleted_Row_Headings">加价幅度：</span>
              <span class="deleted_OrderTitle">{{ form.addPrice}}</span>
            </el-col>
            <el-col :span="6">
              <span class="deleted_Row_Headings">平台佣金:</span>
              <span class="deleted_OrderTitle">{{ form. brokerage}}</span>
            </el-col>
            <el-col :span="6">
              <span class="deleted_Row_Headings">压金:</span>
              <span class="deleted_OrderTitle">{{ form.grabFee}}</span>
            </el-col>
          </el-row>
          <el-row :gutter="24" class="deleted_OrderContent">
             <el-col :span="6">
              <span class="deleted_Row_Headings">压金日期:</span>
              <span class="deleted_OrderTitle">{{ form.grabDate|datetimeFormatter}}</span>
            </el-col>
            <el-col :span="6">
              <span class="deleted_Row_Headings">付款日期:</span>
              <span class="deleted_OrderTitle">{{ form.paymentDate|datetimeFormatter}}</span>
            </el-col>
            <el-col :span="6">
              <span class="deleted_Row_Headings">完成日期:</span>
              <span class="deleted_OrderTitle">{{ form. completeDate|datetimeFormatter}}</span>
            </el-col>
          </el-row>
          <el-row :gutter="24" class="deleted_OrderContent">
            <el-col :span="6">
              <span class="deleted_Row_Headings">用户昵称：</span>
              <span class="deleted_OrderTitle">{{ form. nickname}}</span>
            </el-col>
            <el-col :span="6">
              <span class="deleted_Row_Headings">收款账号：</span>
              <span class="deleted_OrderTitle">{{ form. accountId}}</span>
            </el-col>
          </el-row>
      
         
          <el-row :gutter="24" class="deleted_OrderContent">
   
            <el-col :span="6">
              <span class="deleted_Row_Headings">收款凭证:</span>
              <!-- <span class="deleted_OrderTitle">{{ form.voucher}}</span> -->
              <div v-if="form.voucher">
               <img style="width:200px;height:200px;margin-left:20px" :src="form.voucher" alt="">
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
    </el-card>
   <el-card class="box-card" style="margin-top:20px">
      <div>
        <div style="display: flex;align-items: center;justify-content: space-between">
          <div class="details_Header">
            <div class="deleted_Line" />
            <span class="details_HeaderTitle">买方信息</span>
          </div>
        </div>
        <div>
          <el-row :gutter="24" class="deleted_OrderContent">
            <el-col :span="6">
              <span class="deleted_Row_Headings">用户昵称：</span>
              <span class="deleted_OrderTitle">{{ form.buyerName}}</span>
            </el-col>
            <el-col :span="6">
              <span class="deleted_Row_Headings">联系方式：</span>
              <span class="deleted_OrderTitle">{{ form.buyerMobile}}</span>
            </el-col>
             <el-col :span="6">
              <span class="deleted_Row_Headings">推荐人昵称：</span>
              <span class="deleted_OrderTitle">{{  form.buyerPromoterName}}</span>
            </el-col>
            <el-col :span="6">
              <span class="deleted_Row_Headings">推荐人联系方式：</span>
              <span class="deleted_OrderTitle">{{ form.buyerPromoterMobile}}</span>
            </el-col>
          
          </el-row>
              <el-row :gutter="24" class="deleted_OrderContent">
           <el-col :span="6">
              <span class="deleted_Row_Headings">紧急联系人：</span>
              <span class="deleted_OrderTitle">{{ form.buyerliaisonName}}</span>
            </el-col>
            <el-col :span="6">
              <span class="deleted_Row_Headings">紧急人联系方式：</span>
              <span class="deleted_OrderTitle">{{ form.buyerliaisonMobile}}</span>
            </el-col>
          </el-row>
        </div>
      </div>
    </el-card>
   <el-card class="box-card" style="margin-top:20px">
      <div>
        <div style="display: flex;align-items: center;justify-content: space-between">
          <div class="details_Header">
            <div class="deleted_Line" />
            <span class="details_HeaderTitle">卖方信息</span>
          </div>
        </div>
        <div>
          <el-row :gutter="24" class="deleted_OrderContent">
            <el-col :span="6">
              <span class="deleted_Row_Headings">用户昵称：</span>
              <span class="deleted_OrderTitle">{{ form.memberName}}</span>
            </el-col>
            <el-col :span="6">
              <span class="deleted_Row_Headings">联系方式：</span>
              <span class="deleted_OrderTitle">{{ form.memberMobile}}</span>
            </el-col>
         <el-col :span="6">
              <span class="deleted_Row_Headings">推荐人昵称：</span>
              <span class="deleted_OrderTitle">{{  form.promoterName}}</span>
            </el-col>
            <el-col :span="6">
              <span class="deleted_Row_Headings">推荐人联系方式：</span>
              <span class="deleted_OrderTitle">{{ form.promoterMobile}}</span>
            </el-col>
          </el-row>
          <el-row :gutter="24" class="deleted_OrderContent">
            <el-col :span="6">
              <span class="deleted_Row_Headings">紧急联系人：</span>
              <span class="deleted_OrderTitle">{{ form.liaisonName}}</span>
            </el-col>
            <el-col :span="6">
              <span class="deleted_Row_Headings">紧急人联系方式：</span>
              <span class="deleted_OrderTitle">{{ form.liaisonMobile}}</span>
            </el-col>
      
          </el-row>
        </div>
      </div>
    </el-card>
   <!-- <el-card class="box-card" style="margin-top:20px">
      <div>
        <div style="display: flex;align-items: center;justify-content: space-between">
          <div class="details_Header">
            <div class="deleted_Line" />
            <span class="details_HeaderTitle">推荐人信息</span>
          </div>
        </div>
        <div>
          <el-row :gutter="24" class="deleted_OrderContent">
            <el-col :span="6">
              <span class="deleted_Row_Headings">用户昵称：</span>
              <span class="deleted_OrderTitle">{{  form.promoterName}}</span>
            </el-col>
            <el-col :span="6">
              <span class="deleted_Row_Headings">联系方式：</span>
              <span class="deleted_OrderTitle">{{ form.promoterMobile}}</span>
            </el-col>

          </el-row>
        </div>
      </div>
    </el-card> -->

  </div>
</template>

<script>
  import permission from '@/directive/permission/index.js' // 权限判断指令
  import {find,cancel,complete} from '@/api/auctionOrder';
  export default {
    naem: 'snaporder-view',
    directives: {
      
      permission
    },
    data() {
      return {
        form: {
          id: ''
        },
        orderPlans:[]
       
    }
    },
    watch: { // 只要路由发生变化就重新获取数据
      $route(newVal, oldVal) {
        console.log(newVal)
        if (newVal.name == 'snaporder-view' && newVal.query.id != this.form.id) {
          this.form.id = newVal.query.id
          this.findClick()
        }
      }
    },
    computed: {

    },
    filters: {
     
    },
    components: {
        
    },
    created() {
        this.form.id=this.$route.query.id
       var _this = this
       this.findclick()
          
    },
    methods: {
     cancelclick(){
        this.$confirm('确定执行?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
            let params=new URLSearchParams()
            params.append('auctionOrderId',this.$route.query.id)
             cancel(params).then(res=>{
                this.findclick()
            })
        })
      
     },
    completeclick(){
          this.$confirm('确定驳回?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
            let params=new URLSearchParams()
            params.append('auctionOrderId',this.$route.query.id)
             complete(params).then(res=>{
                this.findclick()
            })
        })
     },
     findclick(){
         find(this.form.id).then(res=>{
             this.form=res.data.auctionOrder
         })
     }
    }
  }
</script>

<style scoped>
  .box-card {
    width: 100%;
    box-sizing: border-box;
  }

  .details_Header {
    display: flex;
    align-items: center;
  }

  .deleted_Line {
    width: 2px;
    height: 12px;
    background-color: #409EFF;
  }

  .submit_payMethod_Content_Date {
    font-size: 12px;
    font-weight: 400;
    color: rgba(26, 26, 30, 0.3);
    line-height: 36px;
    /* display: block; */
    /* margin-top: 10rpx; */
  }

  .details_HeaderTitle {
    font-weight: 600;
    margin-left: 5px;
    display: block;
    width: 100px;
  }

  .deleted_OrderHeader {
    padding-top: 5px;
    padding-bottom: 10px;
    margin: 10px 0;
    border-left: 1px solid #f2f2f2;
    border-bottom: 1px solid #f2f2f2;
  }

  .deleted_OrderTitle {}

  .deleted_OrderContent {
    margin-top: 20px;
    display: flex;
    flex-direction: row;
    align-items: center;
  }

  .details_PayHeader {
    display: flex;
    align-items: center;
    margin-top: 40px;
  }

  .details_Buyers {
    display: flex;
    align-items: center;
  }

  .deleted_Row_Headings {
    color: #666666;
  }

  .deleted_OrderName {
    color: #409EFF;
    margin-left: 5px;
    width: 155px;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .product_header_name {
    width: 100%;
    display: flex;
    align-items: center;
    background-color: #f2f2f2;
    margin-top: 20px;
    font-weight: 600;
  }

  .el-dialog-div {
    max-height: 60vh;
    overflow-y: auto;
    overflow-x: hidden;
  }

  .product_header_Plans {
    width: 100%;
    display: flex;
    align-items: center;
    background-color: #f2f2f2;
    margin-top: 20px;
    font-weight: 600;
    justify-content: space-between;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-right: 10px;
    box-sizing: border-box;
  }

  .product_header_Plans_left {
    display: flex;
    align-items: center;
  }
</style>
